import React, { useEffect, useState } from 'react';
import { NavBar, Button, TextArea,Input } from "antd-mobile"
import "./style.scss"
import { getUrl, postUrl } from "../../utils/request"
const Index = () => {
    const [text, setText] = useState([])
    const [list, setList] = useState([])
    const [value, setValue] = useState('')
    const [users, setUsers] = useState('')
    const getWrod = async () => {
        const res = await getUrl('/dowCom')
        console.log(res)
        setText(res.data.results)
    }
    const getList = async () => {
        const res = await getUrl('/Comlist')
        console.log(res)
        setList(res.data.results)
    }
    const inputCom = (val) => {
        setValue(val)
    }
    const inputuser=(val)=>{
        setUsers(val)
    }
    const Submit = async () => {
        const res = await postUrl('/addList', {
            users,
            value
        })
        getList()
        console.log(res)
    }
    useEffect(() => {
        getWrod()
        getList()
    }, [])
    return (
        <div className='textWrap'>
            <NavBar>文章</NavBar>
            <main>
                {
                    text.length ?
                        <dl>
                            <dt><h3>{text[0].name}</h3><span>{text[0].author}</span></dt>
                            <dd>{text[0].word}</dd>
                        </dl>
                        : '无数据'
                }
                <TextArea
                    placeholder='评论内容'
                    value={value}
                    onChange={(val) => inputCom(val)}
                />
                <Input
                    placeholder='用户名'
                    value={users}
                    onChange={(val) => inputuser(val)}
                />
                <Button onClick={() => Submit()}>发表评论</Button>
                {
                    list.length && list.map((v, i) => {
                        return (
                            <dl key={i}>
                                <dt><b>{v.user}</b></dt>
                                <dd><p>{v.word}</p></dd>
                            </dl>
                        )
                    })
                }
            </main>
        </div>
    );
}

export default Index;